import { defineComponent, ref } from "vue";
import CardView from "@/components/CardView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ListView from "@/components/ListView";
import { Divider } from "vant";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import { useRequest } from "./request";
import { getUserInfoUrl, phoneNumControl } from "@/command/apiTool";
import IconText from "@/components/IconText";
import time from "@/assets/image/time.png";
import PageTitle from "@/components/PageTitle";
import BackGroundImage from "@/components/BackGroundImage";
import InfoCellGray from "@/components/InfoCellGray";
import TextView from "@/components/TextView";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import { ITextGroupPropsData } from "@/components/TextGroups/types";
import { useRouter } from "vue-router";
import MessageCard from "@/components/MessageCard";
import LineChart from "@/components/LineChart";
import { lineChartData } from "@/components/LineChart/types";
import FilterMenuSearch from "@/components/FilterMenuSearch";

export default defineComponent({
  name: "",
  setup() {
    const form = ref({});
    const router = useRouter();
    const { page, newInfoList, btnAction, queryApplyNum } = useRequest();
    const renderChart = () => {
      const data: lineChartData[] = [
        {
          name: "申请数",
          data: queryApplyNum.value.smallApplyNumYear,
          color: "#4485FF",
          areaColor: ["#6599e2", "rgba(255,255,255,0)"],
        },
        {
          name: "受理数",
          data: queryApplyNum.value.acceptNumYear,
          color: "#28C9BF",
          areaColor: ["#54c2b7", "rgba(255,255,255,0)"],
        },
      ];
      const options = {
        xAxis: {
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
      };
      return (
        <CardView title={"溯源情况"}>
          <div class={"flex text-[10px] mb-10"}>
            <div class={"mr-[30px]"}>
              <div>小户申请类</div>
              <div>
                计数
                <span class={"text-[#6599e2]  mx-[4px]"}>
                  {queryApplyNum.value.smallApplyNum}
                </span>
                次
              </div>
            </div>
            <div>
              <div>受理申请类</div>
              <div>
                计数
                <span class={"text-[#54c2b7] mx-[4px]"}>
                  {queryApplyNum.value.acceptNum}
                </span>
                次
              </div>
            </div>
          </div>
          <LineChart
            data={data}
            options={options}
            class="!h-[200px] !w-[335px]"
          />
        </CardView>
      );
    };
    const render1 = () => {
      const messages = newInfoList.value.map((e: any) => {
        let maskedPhoneNumber = phoneNumControl(e.phone);
        return {
          text: `用户${maskedPhoneNumber}通过平台成功向结队大户申请`,
          time: e.agoDetail,
        };
      });
      return (
        <BackGroundImage>
          {renderChart()}
          <MessageCard data={messages} />
        </BackGroundImage>
      );
    };
    const renderItem = (e: any) => {
      const buttons2: IButtonGroupViewData[] = [
        {
          text: "拒绝",
          onClick: () => {
            btnAction({
              id: e.id,
              status: "2",
            });
          },
        },
        {
          text: "同意",
          onClick: () => {
            btnAction({
              id: e.id,
              status: "1",
            });
          },
        },
      ];
      const data: ITextGroupPropsData[] = [
        {
          name: "检测农产品",
          value: e.categoryName,
        },
      ];
      return (
        <div class={"w-full"}>
          <InfoCellGray
            {...{
              labels: e.jieDuiFlag
                ? [
                    {
                      name: "结队小户",
                      type: "tag",
                    },
                  ]
                : undefined,
              data: data,
              title: e.applyName,
              src: e.logo,
            }}
          >
            <TextView>预约日期：{e.time}</TextView>
            <RoundEdgeButtonGroup data={buttons2} />
          </InfoCellGray>
          <Divider />
        </div>
      );
    };
    const render2 = () => {
      // 以下数据是为了测试组件 不代表实际key
      const data: IFilterMenuChoose[] = [
        {
          type: "area",
          key: "areaCode",
        },
        {
          type: "productType",
          key: "categoryId",
          title: "类别",
        },
        {
          type: "datePicker",
          key: "time",
        },
      ];
      return (
        <CardView title={"申请列表"}>
          <FilterMenuSearch
            choose={data}
            v-model={form.value}
            searchKey="title"
          />
          <ListView
            {...getUserInfoUrl({
              dh: "/api/H5/gov/richTraceSourceApply/large/queryApplyList",
              xh: "",
            })}
            ref={page}
            type="page"
            params={form.value}
            renderItem={renderItem}
          />
        </CardView>
      );
    };

    return () => {
      return (
        <PageTitle
          title="帮溯源"
          right={() => (
            <IconText
              url={time}
              text="溯源记录"
              class="header-right"
              onClick={() => router.push("/traceabilityRecord")}
            />
          )}
        >
          {/* {renderChart()} */}
          {render1()}
          {render2()}
        </PageTitle>
      );
    };
  },
});
